import Phone from '../../components/DIY/Phone/Phone';
import Edit from '../../components/DIY/Edit/Edit'
import {Card} from "antd";
import './DIY.less'
import http from "../../utils/http";
import {useEffect, useState} from "react";

const DIY = ()=>{
    const [swiper,setSwiper] = useState([]);
    const [menu,setMenu] = useState([]);
    const [nav,setNav] = useState([]);
    const [addState,setAddState] = useState(0);
    const [status,setStatus] = useState(0);

    const [myPhone1,setMyPhone1] = useState();
    const [myEdit1,setMyEdit1] = useState();

    useEffect(()=>{
        getSwiperData();
        getMenuData();
        getNavData();
    },[])

    useEffect(()=>{
        setMyPhone1(myPhone());
        setMyEdit1(myEdit());
    },[swiper,menu,nav,addState])

    const getSwiperData = () => {
        http({
            url:'api/diyController/bannerList',
            method:'post',
            data:{}
        }).then(res=>{
            if (res.code == 200) {
                setSwiper(res.data)
            }
            console.log(res);
        }).catch(err=>{
            console.log(err)
        })
    }
    const getMenuData = () => {
        http({
            url:'api/diyController/controlTableList',
            method:'post',
            data:{}
        }).then(res=>{
            if (res.code == 200) {
                setMenu(res.data)
            }
            console.log(res);
        }).catch(err=>{
            console.log(err)
        })
    }
    const getNavData = () => {
        http({
            url:'api/diyController/navigationList',
            method:'post',
            data:{}
        }).then(res=>{
            if (res.code == 200) {
                setNav(res.data)
            }
            console.log(res);
        }).catch(err=>{
            console.log(err)
        })
    }

    const setData = (msg) => {
        getSwiperData();
        getMenuData();
        getNavData();
    }

    const myPhone = () => (<Phone swiper={swiper} menu={menu} nav={nav}/>);
    const myEdit = () => (<Edit swiper={swiper} menu={menu} nav={nav} onData={setData} addState={addState}/>);
    return(
        <div style={{width:'100%'}}>
            <Card className={'DIY-cardBox'}>
                {myPhone1}

                {myEdit1}
            </Card>
        </div>
    )
}

export default DIY;